//message
import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      {
        id: 0,
        title: "message1",
      },
      {
        id: 1,
        title: "message2",
      },
      {
        id: 2,
        title: "message3",
      },
    ],
  };
  render() {
    // 在return之前定义组件要用的变量
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
                <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                {/* 因为只有一个，所以就不需要Switch防止穿透 */}
              </li>
            );
          })}
        </ul>
        detail内容:
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    );
  }
}
